<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width" />

    <title>Silly story generator</title>

    <style>
      body {
        font-family: helvetica, sans-serif;
        width: 350px;
      }

      label {
        font-weight: bold;
      }

      div {
        padding-bottom: 20px;
      }

      input[type="text"] {
        padding: 5px;
        width: 150px;
      }

      p {
        background: #ffc125;
        color: #5e2612;
        padding: 10px;
        visibility: hidden;
      }
    </style>
  </head>

  <body>
    <div>
      <label for="customname">Enter custom name:</label>
      <input id="customname" type="text" placeholder="" />
    </div>
    <div>
      <label for="us">US</label
      ><input id="us" type="radio" name="ukus" value="us" checked />
      <label for="uk">UK</label
      ><input id="uk" type="radio" name="ukus" value="uk" />
    </div>
    <div>
      <button class="randomize">Generate random story</button>
    </div>
    <!-- Thanks a lot to Willy Aguirre for his help with the code for this assessment -->
    <p class="story"></p>
  </body>

  <script>
    const customName = document.getElementById("customname");
    const randomize = document.querySelector(".randomize");
    const story = document.querySelector(".story");

    function randomValueFromArray(array) {
      const random = Math.floor(Math.random() * array.length);
      return array[random];
    }

    const xarray = ["Willy the Goblin", "Big Daddy", "Father Christmas"];
    const yarray = ["the soup kitchen", "Disneyland", "the White House"];
    const zarray = [
      "spontaneously combusted",
      "melted into a puddle on the sidewalk",
      "turned into a slug and crawled away",
    ];

    randomize.addEventListener("click", result);

    function result() {
      let name = "Bob";
      if (customName.value !== "") {
        name = customName.value;
      }

      let x = randomValueFromArray(xarray);
      let y = randomValueFromArray(yarray);
      let z = randomValueFromArray(zarray);

      let weight = 140;
      let temperature = 35;
      if (document.getElementById("uk").checked) {
        weight = Math.round(weight * 2.2046);
        temperature = Math.round(32 + temperature * 1.8);
      }

      let newStory = `It was ${temperature} fahrenheit outside, so ${x} went for a walk. When they got to ${y}, they stared in horror for a few moments, then ${z}. ${name} saw the whole thing, but was not surprised — ${x} weighs ${weight} pounds, and it was a hot day.`;
      story.textContent = newStory;
      story.style.visibility = "visible";
    }
  </script>
</html>
